<template>
	<div class="user-profile">
		<!-- 导航栏 -->
		<van-nav-bar
		  title="个人信息"
		  left-arrow
		  @click-left="$router.back()"
		  class="app-nav-bar"
		/>
		<input type="file" 
			   hidden
			   ref="file"
			   accept="image/*"
			   @change="onFileChange"
		/>
		<van-cell title="头像" is-link center @click="onShowFile">
			<van-image
				width="30"
				height="30"
				round
				fit="cover"
				:src="user.photo"
			></van-image>
		</van-cell>
		<van-cell title="昵称" is-link :value="user.name" @click="isEditNameShow=true"></van-cell>
		<van-cell title="性别" is-link :value="user.gender==1?'女':'男'" @click="isEditGenderShow=true"></van-cell>
		<van-cell title="生日" is-link :value="user.birthday" @click="isEditBirthdayShow=true"></van-cell>
		
		<van-popup
			v-model="isEditNameShow"
			position="bottom"
			:style="{height:'100%'}"
		>
			<nick-name
				v-if="isEditNameShow"
				v-model="user.name" 
				@confirm = "handleEditName"
				@close="isEditNameShow=false"
			/>
		</van-popup>
		<!-- 修改性别弹出层 -->
		<van-popup
			v-model="isEditGenderShow"
			position="bottom"
			:style="{height:'100%'}"
		>
			<edit-gender
				v-if="isEditGenderShow"
				@close="isEditGenderShow=false"
				v-model="user.gender"
				@confirm="handleEditGender"
			/>
		</van-popup>
		<!-- 修改生日弹出层 -->
		<van-popup
			v-model = "isEditBirthdayShow"
			position="bottom"
			:style="{height:'100%'}"
		>
			<edit-birthday
				v-if="isEditBirthdayShow"
				v-model = "user.birthday"
				@close="isEditBirthdayShow=false"
				@confirm="handleEditBirthday"
			/>
		</van-popup>
		<!-- 修改头像 -->
		<van-popup
			v-model="isPreviewPhotoShow"
			position="bottom"
			:style="{height:'100%'}"
		>
			<edit-preview 
				v-if="isPreviewPhotoShow"
				:previewImage = "previewImage"
				:file="file"
				@close="isPreviewPhotoShow=false"
				@confirm="handleEditAvatar"
			/>
		</van-popup>
	</div>
</template>

<script>
	
	import {getUserProfile,updateUserProfile,upDateUserAvatar} from '@/api/user.js'
	import nickName from './childCmp/nick-name.vue'
	import editGender from './childCmp/edit-gender.vue'
	import editBirthday from './childCmp/edit-birthday.vue'
	import editPreview from './childCmp/edit-preview.vue'
	import dayjs from 'dayjs'
	export default {
		name:'user-profile',
		data(){
			return {
				user:{},
				isEditNameShow:false,
				isEditGenderShow:false,
				isEditBirthdayShow:false,
				isPreviewPhotoShow:false,
				file:null,
				previewImage:''
			}
		},
		created(){
			this.loadUserProfile()
		},
		components:{
			nickName,
			editGender,
			editBirthday,
			editPreview
		},
		methods:{
			async loadUserProfile(){
				const {data} = await getUserProfile()
				this.user = data.data
			},
			async handleEditName(options){
				
				try{
					await this.saveProfile(options.name,options.inputName)
					this.user.name = options.inputName
					this.isEditNameShow=false
				}catch({response}){
					if(response.status === 400){
						this.$toast.fail("昵称必须在1-7个字符之间")
					}
				}
			},
			async handleEditGender(options){
				const field = options.field
				const val = parseInt(options.value)
				
				try{
					 await this.saveProfile(field,val)
					
					this.user.gender = val
					this.isEditGenderShow=false
				}catch(err){
					console.log(err)
				}
			},
			handleEditBirthday(options){
				const field = options.field
				const birthday = dayjs(options.value).format('YYYY-MM-DD')
				try{
					this.saveProfile(field,birthday)
					this.user.birthday = birthday
					this.isEditBirthdayShow = false
				}catch(err){
					console.log(err)
				}
			},
			onShowFile(){
				this.$refs.file.click()
			},
			onFileChange(){
				
				// console.log(this.$refs.file.files[0])
				this.previewImage = window.URL.createObjectURL(this.$refs.file.files[0])
				this.file = this.$refs.file.files[0]
				this.isPreviewPhotoShow = true
				// 清空内容 否则报错
				//2.选择同一个文件之后，还能再出发change事件。-->
				// 清空上一次触发change事件后 input的value即可。
				//this.$refs.file.value=''
				
			},
			async handleEditAvatar(options){
				
				this.$toast({
					duration:0,
					forbidClick:true,
					message:'保存中...'
					
				})
				const fd = new FormData()
				fd.append('photo',options)
				try{
					await upDateUserAvatar(fd)
					// 更新视图
					this.user.photo = window.URL.createObjectURL(options)
					this.isPreviewPhotoShow = false
					this.$toast.success('保存成功')
				}catch(err){
					console.log(err)
					this.$toast.fail('失败')
				}
			},
			async saveProfile(filed,value){
				this.$toast({
					duration:0,
					forbidClick:true,
					message:'保存中...'
				})
				try{
					await updateUserProfile({
						[filed] : value
					})
					
					this.$toast.success('保存成功！')
					
				}catch(err){
					this.$toast.fail('保存失败')
					return Promise.reject(err)
				}
				
			
			}
		}
	}
</script>

<style scoped lang="less">
</style>
